<template>
  <div title="新建">
    <el-popover
      placement="right-start"
      :offset="10"
      v-model="visibleGroup"
      trigger="click"
      :visible-arrow="false"
      popper-class="addIconPopover"
      :popper-append-to-body="true"
    >
      <div class="addIcon-popover">
        <div class="up" @click="handelPushTask(gindex, tindex, distinguish)">
          新建任务
        </div>
        <div class="addIcon-line" />
        <div class="down" @click="handelPushGroup(gindex, tindex, distinguish)">
          新建任务组
        </div>
        <div class="addIcon-line" />
        <div class="down" @click="getClipboardContent">粘贴任务</div>
      </div>
      <i class="iconfont iconadd" slot="reference"></i>
      <!-- <div slot="reference">添加</div> -->
    </el-popover>
    <el-dialog
      title="粘贴任务数据"
      center
      :visible.sync="showTaskData"
      :close-on-click-modal="false"
      :append-to-body="true"
      @close="handleClose">
      <div style="display:flex;align-items:center;">
        <span>粘贴区域：</span><el-input style="flex: 1" v-model="copyData" type="text" placeholder="粘贴任务数据"></el-input>
      </div>
      <div style="margin-top: 10px;">
        <Task :currData="copyTaskData" v-if="dataCorrectFormat" />
        <div v-if="!dataCorrectFormat && copyData" style="margin-top:10px;">数据格式有误，请在编辑任务界面中点击“复制任务”按钮，再粘贴。</div>
      </div>
      <template slot="footer">
        <el-button @click="confirmPushTask" v-if="dataCorrectFormat">确认粘贴</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getClipboard } from "@/util/tool"
const Task = () => import('./task.vue')
export default {
  components: {
    Task
  },
  data() {
    return {
      visibleGroup: true,
      showTaskData: false,
      copyTaskData: {}, // 粘贴任务的数据
      dataCorrectFormat: false,
      copyData: '',
    };
  },
  props: {
    gindex: Number,
    tindex: Number,
    distinguish: Number, // 分割数组需要+distinguish
  },
  watch: {
    copyData(n,o) {
      if (!this.showTaskData) return
      try {
        this.copyTaskData = JSON.parse(n);
        this.dataCorrectFormat = true
      } catch (error) {
        this.copyTaskData = {}
        this.dataCorrectFormat = false
        return this.$antdMessage.warning({content: "粘贴任务数据，需要在任务编辑界面点击‘复制任务’按钮"})
      }
    }
  },
  created() {
    this.visibleGroup = false;
  },
  methods: {
    // 参数: 任务组索引， 任务索引
    // 添加任务
    handelPushTask(gindex, tindex, distinguish) {
      this.visibleGroup = false;
      this.$emit("handelPushTask", gindex, tindex, distinguish);
    },
    // 添加任务组
    handelPushGroup(gindex, tindex, distinguish) {
      this.visibleGroup = false;
      this.$emit("handelPushGroup", gindex, tindex, distinguish);
    },
    // 获取剪切板的内容
    async getClipboardContent() {
      this.copyTaskData = {}
      // this.$nextTick(()=>{
      //   this.showTaskData = true
      // })
      let result = await getClipboard()
      let obj
      try {
        obj = JSON.parse(result);
      } catch (error) {
        return this.$antdMessage.warning({content: "粘贴任务，需要先复制任务数据"})
      }
      if(obj) {
        this.copyTaskData = obj
        // this.$nextTick(()=>{
        //   this.showTaskData = true
        // })
        this.confirmPushTask()
      } else {
        this.$antdMessage.warning({content: '粘贴的数据为空，请复制任务数据后再试!'})
      }
      this.visibleGroup = false;
    },
    // 确认插入任务
    confirmPushTask() {
      let removeField = ['allowOtherAuthor','authorID','courseID','isLockedForPublish','isSyncToPublic','lastUpdateAuthorID','publishedCount','taskGroupID','taskID','taskNoInGroup','id']
      let newTaskData = JSON.parse(JSON.stringify(this.copyTaskData))
      Object.keys(newTaskData).forEach(key => {
        if (removeField.indexOf(key) !== -1) newTaskData[key] = undefined
        if (key == 'guidelines') newTaskData['guidelines'].forEach(item => item.state = '未发布')
        if (key == 'updateFieldName') newTaskData['updateFieldName'] =  ["courseID","taskGroupID","taskNoInGroup",'canVote','description','goal','guidelineTotal','guidelines','iconPath','isFinalTask','level','memo','name','weightInGroup']
        if (key == 'isLockedForPublish') newTaskData['isLockedForPublish'] = true
        if (key == 'state') newTaskData['state'] = '未保存'
      })
      this.$emit("handelPushTask", this.gindex, this.tindex, this.distinguish, newTaskData)
      this.showTaskData = false
    },
    // 关闭dialog
    handleClose() {
      this.showTaskData = false
      this.copyTaskData = {}
      this.dataCorrectFormat = false
      this.copyData = ''
    }
  },
};
</script>

<style >
.addIconPopover {
  padding: 8px 0px !important;
  width: auto !important;
  min-width: unset;
  background-color: #ffffff;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.16);
  border-radius: 5px;
  border: solid 1px #707070;
}
.iconadd::before {
  content: "\e601" !important;
}
</style>